<template>
	<view>
		<view class="table-content" v-if="form.length">
			<view class="list-item-wrapper" v-bind:id="index" :style="onlineStyle[index]" v-for="(item,index) in form" :key="index">
					<view class="list-item">
						<text>需添加的机台号</text>
						<text>{{item.split('!')[2]}}</text>
					</view>
					
					<view class="list-item">
						<text>工序条码</text>
						<text>{{item.split('!')[1]}}</text>
					</view>
					
					<view class="list-item">
						<view>已绑定的机台号</view>
						<view style="max-width: 380rpx">{{item.split('!')[0]}}</view>
					</view>
					
					<view class="operateBtn">
						<u-button size="medium" type="warning" @click="updateMachineId(item,index,'delete')">删除</u-button>
						<u-button size="medium" type="success" @click="updateMachineId(item,index,'add')">允许</u-button>
					</view>
			</view>
		</view>
		<view v-else class="view-empty">
			<u-empty mode="data"></u-empty>
		</view>
		<u-top-tips ref="uTips"></u-top-tips>
	</view>
</template>	
<script>
	import { findPlanMachineUpdateMachineId,planMachineUpdateMachineId,getQePlanList } from '../../../utils/index.js'
	export default {
		data() {
			return {
				form: '',					//工位ID信息
				onlineStyle: ["",""],		//当工位为重点工序状态时填充的样式
			}
		},
		methods:{
			// 查询数控焊接sop发起的工单绑定机台的机台切换数据
			async getfindPlanMachineUpdateMachineId() {
				const {data} = await findPlanMachineUpdateMachineId()
				if(data.code == 1) {
					if(!data.data[0]) return this.form = []
					this.form = data.data
					for(let i = 0;i < this.form.length;i++){				//遍历records数组改变背景颜色
						this.judgeStyle(i)
					}
				} else {
					this.$refs.uTips.show({
						title: data.msg,
						type: 'success',
						duration: '2000'
					})
				}
			},
			judgeStyle(value) {
				this.onlineStyle[value] = "background-color: #FFEFD5;"
				return
				if(this.form[value].isImport == "0") {
					this.onlineStyle[value] = "background-color: #FFEFD5;"
				} else {
					this.onlineStyle[value] = "background-color: #90EE90;"
				}
			},
			// 数控焊接工段长确认sop发起的工单绑定机台的机台切换
			async updateMachineId(item,index,status) {
				const {data} = await planMachineUpdateMachineId({type:status=='delete'?'1':'0',deviceBarcode: item})
				if(data.code == '1'){
					this.form.splice(index,1)
					this.$refs.uTips.show({
						title: data.msg,
						type: 'success',
						duration: '2000'
					})
				} else {
					this.$refs.uTips.show({
						title: data.msg,
						type: 'warning',
						duration: '2000'
					})
				}
			},
		},
		onLoad(option) {
			this.getfindPlanMachineUpdateMachineId()
		},
	}	
</script>

<style>
	.main-content {
		width: 100%;
	}
	.scroller {
		width: 100%;
		overflow: hidden;
	}
	.main-content ::v-deep .u-form {
		margin: 0rpx 10rpx;
		padding: 0rpx 10rpx;
	}
	#form-container ::v-deep .u-form-item {
		margin-top: 5rpx;
		padding: 5rpx 0rpx;
	}
	// 查询按钮样式
	.checkBtn {
		display: flex;
		justify-content: center;
	}
	// 排产返回的列表信息块外层包裹器
	.list-item-wrapper {
		margin: 20rpx;
		padding: 20rpx;
		background-color: #FFEFD5;
	}
	// 排产返回的列表信息块的样式
	.list-item {
		display: flex;
		justify-content: space-between;
		font-size: 16px;
		margin: 20rpx 10rpx;
	}
	// 上线下线按钮样式
	.operateBtn {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
	}
	.hintInfo {
		display: flex;
		justify-content: center;
		color: #E0E0E0;
	}
	.view-empty{
		width: 100vw;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
